<template>
  <view class="bg-green-line" style="position: relative;">
    <view style="position: relative;z-index:10;">
		<my-navbar title="预定位置" leftIcon="arrow-left" leftIconSize="40" :custom="false" :autoBack="true"></my-navbar>
		<view class="container">
			<view>
				<view style="display:flex; flex-direction:row;justify-content: space-around;">
          <view class="fxl" style="width: 500rpx;display: flex">
            <u-icon size="80" name="/static/index/store.png" color="#e66f57"></u-icon>
            <view style="margin-top: 10rpx;padding: auto 0;">
              <u--text lines="1" :bold="true" size="36" color="#5b5b5b" :text="store.roomName" />
              <u--text :bold="false" size="26" color="#5b5b5b" :text="'营业时间：'+time+''" />
            </view>
          </view>
          <view @click="changeShowStore()" class="change">
            <u--text :bold="true" size="34" color="#006737" :selectable="false" text="切换门店"/>
            <i class="iconfont icon-qiehuan"></i>
          </view>
				</view>
			</view>
			<u-divider></u-divider>

      <view class="margin20 rad20 box-shadow tab-pub">
        <view class="block" v-for="(item,index) in list" @click="tabClick(item)" :class="{'focus':index==tabSelect}" :style="{width:'50%'}">{{item.name}}</view>
      </view>
			<view v-if="tabSelect==0" style="margin-top: 40rpx;">
        <view class="select-time" style="margin:0rpx 30rpx;">
          <u--text :bold="false" size="30" color="#222" text="预约开始时间" />
<!--          <u&#45;&#45;text :bold="true" size="40" color="orange" text="2024-05-19 4:30"  @click="clickButton"/>-->
        </view>
        <view style="margin: 0 auto;text-align: center; width: 100%;margin-top: 20rpx;">
          <image src="/static/order/time.png"></image>
        </view>
			</view>
      <view v-if="tabSelect==1" style="margin-top: 40rpx;">
        <u--text style="margin-left:20rpx;" :bold="false" size="30" color="#222" text="请选择卡片" />
        <my-card></my-card>
      </view>
      <view style="margin:40rpx;">
        <u-button color="#fff" size="large" @click="clickButton">
          <u-icon name="calendar" color="#ffffff" size="55" label="选择预约时间" :bold="false" labelSize="36"
                  labelColor="#ffffff" labelPos="right"></u-icon>
        </u-button>
      </view>
		</view>
		<view class="ont-toke" style="margin: auto 40rpx;margin-top: 20rpx;">
			<u--text :bold="false" size="24" color="#353535" align="center" :text='oneToke' />
		</view>
<!--		<my-tabbar :menu-select="menuSelect"></my-tabbar>-->
		<view style="max-height: 300rpx;">
			<my-action-sheet :list="storeList" :show="showStore" @closeShow="closeShowStore()"></my-action-sheet>
		</view>
		<view>
			<u-popup :show="showTime" @close="close" round="40">
				<view style="margin: 20rpx;">
					<view style="margin:20rpx 0rpx 40rpx 0rpx;">
						<u--text :bold="true" size="34" align="center" text="选择开始时间"></u--text>
					</view>
					<view>
						<u-tabs class="green-tab" :current="current" :list="dayList" @click="tabsClick" lineWidth="140rpx"
							lineHeight="0rpx" :activeStyle="activeStyle" :itemStyle="itemStyle" :scrollable="false"
							:inactiveStyle="inactiveStyle"></u-tabs>
						<scroll-view scroll-y="true"
							style="max-height: 600rpx;border-top: 0rpx solid #d5d5d5;border-bottom: 0rpx solid #d5d5d5;">
							<u-cell-group>
								<!-- <view v-if="current"> -->
								<u-cell v-for="(list,indexList) in timeList" :key="indexList">
									<view slot="title" class="time">
										<view class="time-item" v-for="(array,indexArray) in list" :key="indexArray">
											<u-tag size="large" :text="array.time" borderColor="#ffffff" shape="circle"
												:plain="array.checked" color="#333" type="primary" :name="indexArray"
												@click="radioClick(array)">
											</u-tag>
										</view>
									</view>
								</u-cell>
							</u-cell-group>
						</scroll-view>
						<view style="width: 100%;margin: 40rpx auto;">
							<view style="text-align: center;">
								<span style="font-size: 28rpx; color: #555555;">已选时间：</span>
								<span style="font-size: 34rpx; color: #02a257;font-weight: bold;">{{orderDay}}-{{orderTime}}</span>
							</view>
							<view style="margin-top: 40rpx;">
								<u-button text="确 认" type="primary" size="large" @click="toSeat"></u-button>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
    </view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
  import myCard from "../../components/my-card/index.vue";
	export default {
    components:{
      myCard
    },
		data() {
			return {
        list: [{name: '预约套餐', key: 0}, {name: '卡券套餐', key: 1}],
        tabSelect:0,
				time: '08:00-23:00',
				showStore: false,
				showTime: false,
				inactiveStyle: {
					fontSize: '30rpx'
				},
				itemStyle: {
					textAlign: 'center',
					width: '140rpx',
					paddingBottom: ' 20rpx',
					lineHeight: '50rpx',
				},
				activeStyle: {
					background: '#029b54',
          color:'#fff',
          borderRadius:'10rpx',
          padding:'10rpx 20rpx',
					fontWeight: 'bold'
				},
				dayList: [],
				timeList: [],
				allTimeList: [],
				orderTime: '',
				orderDay: '',
				orderTimestamp: '',
				current: 0,
			}
		},
		methods: {
      tabClick(e) {
        this.tabSelect = e.key
        console.log(e,this.tabSelect);
      },
			closeShowStore() {
				this.showStore = false
			},
			changeShowStore() {
				this.showStore = true;
			},
			closeShowTime() {
				this.showTime = false;
			},
			clickButton() {
				this.showTime = true;
				this.setDayList()
				this.getTimeList(this.dayList[0].timestamp)
				this.orderDay = uni.$u.date(this.dayList[0].timestamp, 'mm月dd日')
				console.log(this.orderDay)
			},
			// 时间标签
			radioClick(array) {
				const that = this
				console.log(array)

				that.timeList.forEach(function(list, index) {
					list.forEach(function(item, key) {
						item.checked = array.time === item.time ? false : true
						if (array.time === item.time) {
							that.orderTime = uni.$u.date(item.timestamp, 'hh:MM')
							that.orderTimestamp = item.timestamp
						}
					})
				})

			},
			getTimeList(timestamp) {

				console.log(uni.$u.date(timestamp, 'yyyy-mm-dd hh:MM:ss'))
				console.log(this.dayList)
				var time = new Date(Date.now()); //设置的时间
				time.setSeconds(0)
				var day = new Date(timestamp); //切换tabs的日期
				this.timeList = []

				if (day.getDate() != time.getDate()) {
					console.log("非当天预约时间")
					time = new Date(timestamp)
					time.setSeconds(0)
					time.setHours(8)
					time.setMinutes(0)
					while (time.getHours() <= 22 && time.getMinutes() !== 30) {
						var a = [];
						for (var i = 0; i < 4; i++) {
							if (time.getHours() == 23 && time.getMinutes() == 0) break;
							a.push({
								time: uni.$u.date(time.valueOf(), 'hh:MM'),
								checked: true,
								timestamp: time.valueOf(),
							})

							time.setMinutes(time.getMinutes() + 30)
						}
						this.timeList.push(a)
						if (time.getHours() == 22 && time.getMinutes() == 30) break;
					}
				} else {
					console.log("当天预约时间")
					console.log(time.toLocaleString())
					if (time.getMinutes() <= 30 && time.getMinutes() >= 0) {
						time.setMinutes(30)
					} else {
						time.setMinutes(0)
						time.setHours(time.getHours() + 1)
					}
					if (time.getHours() < 8) {
						time.setHours(8)
						time.setMinutes(0)
					}
					while (time.getHours() <= 22) {
						var a = [];
						for (var i = 0; i < 4; i++) {
							if (time.getHours() == 23 && time.getMinutes() == 0) break;
							a.push({
								time: uni.$u.date(time.valueOf(), 'hh:MM'),
								checked: true,
								timestamp: time.valueOf(),
							})
							// console.log(time.toLocaleString())
							time.setMinutes(time.getMinutes() + 30)
						}
						this.timeList.push(a)
						if (time.getHours() == 22 && time.getMinutes() == 30) break;
					}
				}
				console.log(this.timeList)

			},
			// tabs 切换
			tabsClick(item) {
				this.current = item.index
				console.log(item, item.timestamp)
				this.getTimeList(item.timestamp)
				this.orderDay = uni.$u.date(item.timestamp, 'mm月dd日')
			},
			setDayList() {
				var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				var day = new Date(Date.now())
				this.dayList = []
				if (day.getHours() != 22 && day.getMinutes() != 30) {
					this.dayList.push({
						index: 0,
						name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
						timestamp: day.valueOf()
					})
				}
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 1,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + "\n" + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 2,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + "\n" + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})


			},
			close() {
				this.current = 0
				this.showTime = false
			},
			toSeat() {
				if (this.orderTime == '') {
					uni.showToast({
						title: "请选择预约时间",
						icon: 'error'
					})
				} else {
					uni.$u.route('/other_pages/seat/seat', {
						orderTimestamp: this.orderTimestamp,
						storeName: this.store.roomName,
						time: this.time,
						orderDay: this.orderDay
					});
				}

			}

		},
		computed: {
			...mapState(['oneToke', 'store', 'storeList'])
		},
		onReady() {},
		onShow() {}
	}
</script>

<style lang="scss" scoped>

.select-time{
  display: flex;
  align-items: center;
}

::v-deep .u-line{
  display: none !important;
}

	.ont-toke {
		// position: absolute;
		// width: 100%;
		// background-color: #4CD964;
		// margin-top: ;
	}

	.time {
		// margin: auto 40rpx;
		//margin-left: 40rpx;
		//padding: auto 140rpx;
    display: flex;
    flex-direction: row;
    //justify-content: space-around;

		.time-item {
			display: inline-block;
			font-size: 34rpx;
      margin:0rpx 8rpx;
      width:calc(25% - 16rpx);
      ::v-deep .u-tag--primary{
        border-radius:10rpx;
        background: #fff !important;
        border:2px solid #02a257 !important;
        box-sizing: border-box;
      }
      ::v-deep .u-tag--primary .u-tag__text--primary{
        color:#02a257 !important;
        font-weight: bold;
      }

      ::v-deep .u-tag--primary--plain {
        display: flex;
        justify-content: center;
        background: #eeeeee !important;
        border-radius:10rpx;
      }
		}
	}
  ::v-deep .u-button{
    background:#006737 !important;
  }
  ::v-deep .tabs__wrapper__nav__item__text{
    color:#0c9d16 !important;
  }
  ::v-deep .u-tag--primary{

  }
  ::v-deep .u-tag--primary--plain{
    color:#333 !important;
  }
  .time ::v-deep .u-tag--primary{
    ::v-deep .u-tag__text--primary{
      color:#fff !important;
    }
  }

</style>
